<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-07 11:01:33
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息通知</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .dialog-content {
          width: 100%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 3mm;
          box-sizing: border-box;
        }
      }
      .dialog-content {
        width: 520px;
        box-sizing: border-box;
        padding: 50px;
        background: #ffffff;
        border-radius: 20px;
        overflow-x: hidden;
      }

      .dialog-content .title {
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #333333;
      }

      .dialog-content .description {
        margin-top: 50px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #353535;
      }

      .dialog-content .btn-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
      }

      .dialog-content .btn-box .cancel-btn {
        width: 190px;
        height: 60px;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 12px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        line-height: 60px;
        cursor: pointer;
      }

      .dialog-content .btn-box .confirm-btn {
        width: 190px;
        height: 60px;
        background: #7c0a03;
        border-radius: 12px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 60px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="dialog-content" v-if="postMessageDatas">
        <div class="title">等叫提示</div>
        <!-- 全单等叫 -->
        <div class="description">
          <!-- 确定对{{
                selectCurrentFoodData.foodName || selectCurrentFoodData.name
              }}等叫，并远程打印等叫通知单吗？ -->
          {{postMessageDatas.content}}
        </div>
        <!-- 单菜等叫 -->
        <!-- <div class="description">您设置的A1桌台的燕窝溺等叫提醒时间15:32已到</div> -->
        <div class="btn-box">
          <div class="cancel-btn" @click="onConfirm(1)">15分钟后提醒</div>
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          postMessageDatas: null
          // 返回的数据格式
          // demo: {
          //     "s": "message", "status": 200, "message": "发送成功",
          //     "data": {
          //         "id": 105, "store_id": 10001,
          //         "shop_id": 111, "type": 1, "sub_type": { "value": "wait", "text": "等叫" },
          //         "title": "等叫", "content": "您好，您的xxx菜品，已到达等叫时间",
          //         "detail": { "foodList": [], "deskName": "a01", "record_id": "111", "order_id": "111", "create_time": "2023-07-29 15:13" },
          //         "is_delete": 0, "create_time": "2023-07-29 15:13:51"
          //     }
          // }
        },
        mounted() {
          //  ipcRenderer.send是发送操作； ipcRenderer.on是接收监听操作
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('notice:info', (event, message) => {
            this.postMessageDatas = message
          })
        },
        methods: {
          // 目前只有全桌的延时15分钟的操作，单菜的还没有做啊！！！！！！！！！！！！！
          onConfirm: function (actionType) {
            //  ipcRenderer.send是发送操作； ipcRenderer.on是接收监听操作
            const { ipcRenderer } = require('electron')
            let datas = {
              type: 'immediately',
              message: this.postMessageDatas
            }
            if (actionType === 1) {
              datas.type = 'delay'
            } else {
              datas.type = 'immediately'
            }
            // 传递发送相关的数据
            ipcRenderer.send('notice:button', datas)
          }
        }
      })
    </script>
  </body>
</html>
